<template>
    <div class="project-tasks">
        <el-tabs v-model="editableTabsValue" type="card" editable @tab-add="addTab" @tab-remove="removeTab">
            <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
                <task-list></task-list>
            </el-tab-pane>
        </el-tabs>
    </div>

    <el-dialog title="提示" v-model="centerDialogVisible" width="30%" center>
        <span>新加项目，设置标题等属性</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="sureAdd">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import TaskList from "../Common/TaskList"

export default {
    name: "ProjectTasks",
    components: { TaskList },
    data () {
        return {
            editableTabsValue: '2',
            editableTabs: [{
                title: 'Tab 1',
                name: '1',
                content: 'Tab 1 content'
            }, {
                title: 'Tab 2',
                name: '2',
                content: 'Tab 2 content'
            }],
            tabIndex: 2,

            centerDialogVisible: false
        }
    },
    methods: {
        addTab () {
            this.centerDialogVisible = true;
        },
        sureAdd () {
            // targetName
            let newTabName = ++this.tabIndex + '';
            this.editableTabs.push({
                title: 'New Tab',
                name: newTabName,
                content: 'New Tab content' + newTabName
            });
            this.editableTabsValue = newTabName;

            this.centerDialogVisible = false;
        },
        removeTab (targetName) {
            let tabs = this.editableTabs;
            let activeName = this.editableTabsValue;
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        let nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                            activeName = nextTab.name;
                        }
                    }
                });
            }

            this.editableTabsValue = activeName;
            this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        }
    }
};
</script>

<style lang="scss" scoped>
.project-tasks {
    width: 100%;
    height: 100%;
    padding: 3px;

    .el-tabs {
        height: 100%;

        :deep(.el-tabs__new-tab) {
            margin: 12px 9px 9px 10px;
            color: black;
            border: 1px solid black;
        }
    }
}
</style>
